﻿
@{
    ViewBag.Title = "Index";
}
@model List<Common.Param_TemplateClassify>
@{ 
    var template = ViewBag.aa as List<Common.Param_Template>;
}
<style data-vue-ssr-id="b28e7a64:0">

    .cv_list[data-v-45fd7514] {
        background-color: #767f95
    }

    .cv_list .page_main[data-v-45fd7514] {
        padding-bottom: 60px;
        min-height: 100vh;
        padding-left: 220px
    }

    .cv_list .page_main .resume_filter[data-v-45fd7514] {
        width: 180px;
        height: calc(100vh - 66px);
        position: fixed;
        top: 66px;
        left: 0;
        background-color: #fff;
        padding: 30px 0 10px;
        z-index: 3
    }

    .cv_list .page_main .resume_filter h3[data-v-45fd7514] {
        font-size: 18px;
        text-align: center;
        line-height: 50px;
        font-weight: 700;
        border-bottom: 1px dashed #ddd
    }

    .cv_list .page_main .resume_filter dl.dl_show dt span[data-v-45fd7514] {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg)
    }

    .cv_list .page_main .resume_filter dl.dl_show dd[data-v-45fd7514] {
        max-height: 500px;
        overflow: visible;
        overflow: initial
    }

    .cv_list .page_main .resume_filter dl dt[data-v-45fd7514] {
        padding: 0 20px;
        height: 38px;
        line-height: 38px;
        font-size: 16px;
        overflow: hidden;
        cursor: pointer
    }

        .cv_list .page_main .resume_filter dl dt:hover span[data-v-45fd7514],
        .cv_list .page_main .resume_filter dl dt[data-v-45fd7514]:hover {
            color: #13d8a7
        }

    .cv_list .page_main .resume_filter dl dt i[data-v-45fd7514] {
        float: left;
        font-size: 22px;
        color: #13d8a7;
        margin-top: -2px;
        margin-right: 10px
    }

    .cv_list .page_main .resume_filter dl dt span[data-v-45fd7514] {
        float: right;
        color: #999
    }

    .cv_list .page_main .resume_filter dl dd[data-v-45fd7514] {
        max-height: 0;
        overflow: hidden;
        padding-top: 5px;
        -webkit-transition: all .3s
    }

    .cv_list .page_main .resume_filter dl dd .filter_class[data-v-45fd7514] {
        display: block;
        line-height: 34px;
        font-size: 13px;
        position: relative
    }

    .cv_list .page_main .resume_filter dl dd .filter_class:last-child .filter_show[data-v-45fd7514] {
        top: -50px
    }

    .cv_list .page_main .resume_filter dl dd .filter_class:nth-last-child(2) .filter_show[data-v-45fd7514] {
        top: -120px
    }

    .cv_list .page_main .resume_filter dl dd .filter_class i[data-v-45fd7514] {
        color: #ddd;
        display: block;
        position: absolute;
        right: 0;
        top: 0;
        margin-right: 16px;
        font-size: 14px;
        -webkit-transform: rotate(-90deg);
        transform: rotate(-90deg)
    }

    .cv_list .page_main .resume_filter dl dd .filter_class[data-v-45fd7514]:hover {
        background-color: rgba(19, 216, 167, .05)
    }

    .cv_list .page_main .resume_filter dl dd .filter_class:hover .filter_name[data-v-45fd7514],
    .cv_list .page_main .resume_filter dl dd .filter_class:hover i[data-v-45fd7514] {
        color: #0db98e
    }

    .cv_list .page_main .resume_filter dl dd .filter_class:hover .filter_show[data-v-45fd7514] {
        display: block
    }

    .cv_list .page_main .resume_filter dl dd .filter_class .filter_name[data-v-45fd7514] {
        padding-left: 52px;
        cursor: pointer;
        color: #444
    }

    .cv_list .page_main .resume_filter dl dd .filter_class .filter_show[data-v-45fd7514] {
        position: absolute;
        left: 166px;
        top: -36px;
        width: 750px;
        padding: 10px 20px;
        background-color: #fff;
        -webkit-box-shadow: 2px 2px 10px rgba(0, 0, 0, .2);
        box-shadow: 2px 2px 10px rgba(0, 0, 0, .2);
        display: none
    }

    .cv_list .page_main .resume_filter dl dd .filter_class .filter_show h5[data-v-45fd7514] {
        font-size: 14px;
        font-weight: 700;
        line-height: 24px;
        padding-left: 5px;
        color: #333
    }

    .cv_list .page_main .resume_filter dl dd .filter_class .filter_show p[data-v-45fd7514] {
        margin-top: 6px;
        margin-bottom: 10px;
        line-height: 24px
    }

    .cv_list .page_main .resume_filter dl dd .filter_class .filter_show p span[data-v-45fd7514] {
        display: inline-block;
        font-size: 13px;
        color: #777;
        margin-right: 10px;
        padding: 0 5px;
        cursor: pointer
    }

        .cv_list .page_main .resume_filter dl dd .filter_class .filter_show p span[data-v-45fd7514]:hover {
            color: #0db98e
        }

    .cv_list .page_main .resume_filter dl dd .filter_class .filter_show .close[data-v-45fd7514] {
        display: none;
        position: absolute;
        right: 0;
        top: 0;
        width: 30px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        font-weight: 400;
        color: #666
    }

    .cv_list .page_main .resume_filter dl dd .active[data-v-45fd7514] {
        background-color: rgba(19, 216, 167, .1);
        color: #0db98e;
        font-weight: 700
    }

    .cv_list .page_main .m_filter[data-v-45fd7514] {
        display: none
    }

    .cv_list .page_main .resume_list[data-v-45fd7514] {
        padding-top: 20px
    }

    .cv_list .page_main .resume_list li[data-v-45fd7514] {
        width: 318px;
        display: inline-block;
        margin: 15px;
        border-radius: 0 0 4px 4px;
        overflow: hidden;
        background-color: #fff;
        border: 1px solid #767f95
    }

        .cv_list .page_main .resume_list li[data-v-45fd7514]:hover {
            -webkit-box-shadow: 0 2px 15px rgba(0, 0, 0, .3);
            box-shadow: 0 2px 15px rgba(0, 0, 0, .3);
            border-color: #13d8a7
        }

    .cv_list .page_main .resume_list li .resume_list_img[data-v-45fd7514] {
        width: 100%;
        height: 440px;
        background-position: center 0;
        background-repeat: no-repeat;
        background-size: 100% auto;
        position: relative;
        overflow: hidden;
        -webkit-transition: all .2s ease-out 0s
    }

    .cv_list .page_main .resume_list li .resume_list_img:hover .list_tip[data-v-45fd7514] {
        opacity: 1
    }

    .cv_list .page_main .resume_list li .resume_list_img .list_tip[data-v-45fd7514] {
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, .5);
        text-align: center;
        color: #fff;
        padding-top: 150px;
        -webkit-transition: all .1s linear 0s;
        transition: all .1s linear 0s;
        opacity: 0
    }

    .cv_list .page_main .resume_list li .resume_list_img .list_tip i[data-v-45fd7514] {
        font-size: 40px
    }

    .cv_list .page_main .resume_list li .resume_list_img .list_tip p[data-v-45fd7514] {
        font-size: 14px;
        margin-top: 10px
    }

    .cv_list .page_main .resume_list li .resume_list_img .list_tip .make[data-v-45fd7514] {
        font-size: 14px;
        margin-top: 10px;
        width: 60%;
        height: 36px;
        line-height: 36px;
        text-align: center;
        color: #fff;
        background-color: #13d8a7;
        border-radius: 8px;
        margin: 20px auto 0
    }

    .cv_list .page_main .resume_list li .resume_list_img dl[data-v-45fd7514] {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        padding: 20px 20px 10px;
        background-color: #fff;
        transform: translateY(100%);
        -webkit-transform: translateY(100%);
        -webkit-transition: all .1s linear 0s;
        transition: all .1s linear 0s;
        z-index: 2
    }

    .cv_list .page_main .resume_list li .resume_list_img dl dd[data-v-45fd7514] {
        color: #999;
        text-align: left;
        padding: 5px 0
    }

    .cv_list .page_main .resume_list li .list_footer[data-v-45fd7514] {
        border-top: 1px dashed #ddd;
        padding: 12px 0;
        margin: 0 10px
    }

    .cv_list .page_main .resume_list li .list_footer .hot_box[data-v-45fd7514] {
        float: right;
        margin-top: -2px
    }

    .cv_list .page_main .resume_list li .list_footer .hot_box i[data-v-45fd7514] {
        color: #f60;
        opacity: .8;
        margin-right: 3px
    }

    .cv_list .page_main .resume_list li .list_footer .hot_box span[data-v-45fd7514] {
        color: #999
    }

    .cv_list .page_main .resume_list li .list_footer .list_btn[data-v-45fd7514] {
        display: none
    }

    .cv_list .page_main .resume_list li .list_footer h4[data-v-45fd7514] {
        width: 208px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 14px
    }

    .cv_list .page_main .resume_list li .tag_box[data-v-45fd7514] {
        padding: 8px 10px;
        border-top: 2px solid #767f95
    }

    .cv_list .page_main .resume_list li .tag_box b[data-v-45fd7514] {
        float: left;
        line-height: 22px;
        color: #999
    }

        .cv_list .page_main .resume_list li .tag_box b[data-v-45fd7514]:hover {
            color: #999 !important
        }

    .cv_list .page_main .resume_list li .tag_box span[data-v-45fd7514] {
        display: inline-block;
        line-height: 22px;
        font-size: 12px;
        padding: 0 5px;
        color: #11b68c;
        border: 1px solid #11b68c;
        border-radius: 6px;
        margin-right: 8px
    }

    .cv_list .page_main .no_data[data-v-45fd7514] {
        padding-top: 60px;
        text-align: center;
        font-size: 13px
    }

    @@media screen and (max-width:1000px) {
        .cv_list[data-v-45fd7514] {
            background-color: #39394d
        }

        .cv_list .page_main[data-v-45fd7514] {
            padding-left: 110px
        }

        .cv_list .page_main .resume_filter[data-v-45fd7514] {
            width: 110px;
            padding-top: 20px;
            top: 50px;
            height: calc(100vh - 50px)
        }

        .cv_list .page_main .resume_filter dl dt[data-v-45fd7514] {
            padding: 0 2px 0 5px;
            font-size: 14px
        }

        .cv_list .page_main .resume_filter dl dt i[data-v-45fd7514] {
            font-size: 18px;
            margin-right: 5px;
            margin-top: 0
        }

        .cv_list .page_main .resume_filter dl dt span[data-v-45fd7514] {
            margin-right: 3px
        }

        .cv_list .page_main .resume_filter dl dd .filter_class:last-child .filter_show[data-v-45fd7514],
        .cv_list .page_main .resume_filter dl dd .filter_class:nth-last-child(2) .filter_show[data-v-45fd7514],
        .cv_list .page_main .resume_filter dl dd .filter_class:nth-last-child(3) .filter_show[data-v-45fd7514] {
            top: auto;
            bottom: 0
        }

        .cv_list .page_main .resume_filter dl dd .filter_class:hover .filter_show[data-v-45fd7514] {
            display: none
        }

        .cv_list .page_main .resume_filter dl dd .filter_class .filter_name[data-v-45fd7514] {
            padding-left: 13px
        }

        .cv_list .page_main .resume_filter dl dd .filter_class i[data-v-45fd7514] {
            margin-right: 5px
        }

        .cv_list .page_main .resume_filter dl dd .filter_class .filter_show[data-v-45fd7514] {
            left: 115px;
            top: -100px;
            width: calc(100vw - 120px);
            padding: 10px;
            max-height: 85vh;
            overflow-y: scroll;
            display: none
        }

        .cv_list .page_main .resume_filter dl dd .filter_class .filter_show ul li p[data-v-45fd7514] {
            margin-top: 1px;
            margin-bottom: 10px
        }

        .cv_list .page_main .resume_filter dl dd .filter_class .filter_show ul li span[data-v-45fd7514] {
            margin-right: 6px;
            font-size: 11px;
            margin-top: 2px
        }

        .cv_list .page_main .resume_filter dl dd .filter_class .filter_show .close[data-v-45fd7514] {
            display: block
        }

        .cv_list .page_main .resume_filter dl dd .active .filter_show[data-v-45fd7514] {
            display: block !important
        }

        .cv_list .page_main .resume_list[data-v-45fd7514] {
            padding-top: 5px
        }

        .cv_list .page_main .resume_list li[data-v-45fd7514] {
            width: 98%;
            margin: 5px 1%;
            height: calc(122vw - 49px);
            -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .2);
            box-shadow: 0 0 5px rgba(0, 0, 0, .2)
        }

        .cv_list .page_main .resume_list li a .resume_list_img[data-v-45fd7514] {
            height: calc(122vw - 120px)
        }

        .cv_list .page_main .resume_list li a .resume_list_img .list_tip[data-v-45fd7514] {
            padding-top: 40%
        }

        .cv_list .page_main .resume_list li a .resume_list_img:hover .list_tip[data-v-45fd7514] {
            display: none !important
        }

        .cv_list .page_main .resume_list li a .list_footer[data-v-45fd7514] {
            padding: 7px 0;
            height: 40px;
            border-color: #bbb
        }

        .cv_list .page_main .resume_list li a .list_footer .hot_box[data-v-45fd7514] {
            display: none
        }

        .cv_list .page_main .resume_list li a .list_footer .list_btn[data-v-45fd7514] {
            display: block;
            float: right;
            background-color: #13d8a7;
            color: #fff;
            line-height: 26px;
            font-size: 13px;
            padding: 0 10px;
            border-radius: 5px
        }

        .cv_list .page_main .resume_list li a .list_footer h4[data-v-45fd7514] {
            width: calc(100% - 78px);
            font-size: 13px;
            line-height: 26px;
            color: #000
        }

        .cv_list .page_main .resume_list li a .tag_box[data-v-45fd7514] {
            padding: 5px 6px 6px;
            height: 31px;
            overflow: hidden;
            border-color: #39394d
        }

        .cv_list .page_main .resume_list li a .tag_box b[data-v-45fd7514] {
            line-height: 20px;
            font-size: 10px
        }

        .cv_list .page_main .resume_list li a .tag_box span[data-v-45fd7514] {
            font-size: 10px;
            line-height: 18px;
            padding: 0 3px;
            margin-right: 5px
        }
    }
</style>
<section class="cv_list" data-v-45fd7514>
    @{
        Html.RenderAction("Header", "Home");
    }
    <div class="page_main" data-v-45fd7514>
        <div class="resume_filter" data-v-45fd7514>
            <dl class="dl_show" data-v-45fd7514>
                <dt data-v-45fd7514>
                    <i class="webfont webicon-fengge" data-v-45fd7514></i> 模板风格
                    <span class="webfont webicon-jtb" data-v-45fd7514></span>
                </dt>
                @foreach (var item in Model)
                {

                    <dd data-v-45fd7514>

                        <div class="filter_class" data-v-45fd7514>
                            <div class="filter_name" data-v-45fd7514>@item.Cname</div>
                        </div>
                    </dd>
                }
            </dl>
            <dl data-v-45fd7514>
                <dt data-v-45fd7514>
                    <i class="webfont webicon-gangwei" data-v-45fd7514></i> 岗位分类
                    <span class="webfont webicon-jtb" data-v-45fd7514></span>
                </dt>
                @foreach (var item in Model)
                {
                    <dd data-v-45fd7514>
                        <div class="filter_class" data-v-45fd7514>
                            <div class="filter_name" data-v-45fd7514>@item.Cname</div>
                        </div>
                    </dd>
                }
            </dl>
        </div>
        <ul class="resume_list clearfix" data-v-45fd7514>
            @foreach (var item in template)
            {
                <li data-v-45fd7514>
                    <a href="@Url.Action("Detail","Template")" tppabs="#"
                       target="_blank" data-v-45fd7514>
                        <div class="resume_list_img" data-v-45fd7514 data-src="@(Common.Tools.TemplateImg+item.Timg)" lazy="loaded" style="background-image:url(@(Common.Tools.TemplateImg+item.Timg));">
                            <div class="list_tip" data-v-45fd7514>
                                <i class="el-icon-view" data-v-45fd7514></i>
                                <p data-v-45fd7514>点击预览</p>
                                <div class="make" data-v-45fd7514>立即使用</div>
                            </div>
                        </div>
                        <div class="tag_box" data-v-45fd7514>
                            <b data-v-45fd7514>支持：</b><span data-v-45fd7514>封面</span><span data-v-45fd7514>在线编辑</span><span data-v-45fd7514>擅长氪金</span><span data-v-45fd7514>700种语言</span>
                        </div>
                        <div class="list_footer" data-v-45fd7514>
                            <div title="热度" class="hot_box" data-v-45fd7514>
                                <i class="webfont webicon-remen" data-v-45fd7514></i><span data-v-45fd7514>@item.Thumbsup</span>
                            </div>
                            <div class="list_btn" data-v-45fd7514>立即使用</div>
                            <h4 data-v-45fd7514>@item.Tname</h4>
                        </div>
                    </a>
                </li>
            }

        </ul>
    </div>

    @{
        Html.RenderAction("Footer", "Home");
    }
</section>
